<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/tags/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>remodal模态锁屏</title>
    <meta charset="utf-8">
    <title>Remodal example</title>
    <meta name="description" content="Remodal example">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${ctx}/static/demo/remodal/remodal.css">
    <link rel="stylesheet" href="${ctx}/static/demo/remodal/remodal-default-theme.css">
    <!-- You can define the global options -->
    <script>
        // window.REMODAL_GLOBALS = {
        //   NAMESPACE: 'remodal',
        //   DEFAULTS: {
        //     hashTracking: true,
        //     closeOnConfirm: true,
        //     closeOnCancel: true,
        //     closeOnEscape: true,
        //     closeOnOutsideClick: true,
        //     modifier: ''
        //   }
        // };
    </script>
    <style>
        .remodal-bg.with-red-theme.remodal-is-opening,
        .remodal-bg.with-red-theme.remodal-is-opened {
            filter: none;
        }

        .remodal-overlay.with-red-theme {
            background-color: #f44336;
        }

        .remodal.with-red-theme {
            background: #fff;
        }
    </style>
</head>
<body>
<div class="remodal-bg">
    <a href="#modal">Modal No1</a><br>
    <a href="#modal2">Modal No2</a>
    <br><br>
</div>

<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
    <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
    <div>
        <h2 id="modal1Title">Remodal</h2>
        <p id="modal1Desc">
            Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin
            with declarative state notation and hash tracking.
        </p>
    </div>
    <br>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

<div data-remodal-id="modal2" role="dialog" aria-labelledby="modal2Title" aria-describedby="modal2Desc">
    <div>
        <h2 id="modal2Title">Another one window</h2>
        <p id="modal2Desc">
            Hello!
        </p>
    </div>
    <br>
    <button data-remodal-action="confirm" class="remodal-confirm">Hello!</button>
</div>
</body>
<script src="${ctx}/static/demo/photo_clip/jquery-2.1.3.min.js"></script>
<script src="${ctx}/static/demo/remodal/remodal.js"></script>

<!-- Events -->
<script>
    $(document).on('opening', '.remodal', function () {
        console.log('opening');
    });

    $(document).on('opened', '.remodal', function () {
        console.log('opened');
    });

    $(document).on('closing', '.remodal', function (e) {
        console.log('closing' + (e.reason ? ', reason: ' + e.reason : ''));
    });

    $(document).on('closed', '.remodal', function (e) {
        console.log('closed' + (e.reason ? ', reason: ' + e.reason : ''));
    });

    $(document).on('confirmation', '.remodal', function () {
        console.log('confirmation');
    });

    $(document).on('cancellation', '.remodal', function () {
        console.log('cancellation');
    });

    //  Usage:
    //  $(function() {
    //
    //    // In this case the initialization function returns the already created instance
    //    var inst = $('[data-remodal-id=modal]').remodal();
    //
    //    inst.open();
    //    inst.close();
    //    inst.getState();
    //    inst.destroy();
    //  });

    //  The second way to initialize:
    $('[data-remodal-id=modal2]').remodal({
        modifier: 'with-red-theme'
    });
</script>
</html>

